<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <title>DesignPortfolio</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">

	    <!-- Styles -->
	    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' >
	    <link href="css/bootstrap.css" rel="stylesheet">
	    <link href="css/responsive.bootstrap.css" rel="stylesheet">
	    <link href="css/screen.css" rel="stylesheet">

	    <!--[if lt IE 9]>
	      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	    <!-- Faviocon and touch -->
	    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="#">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="#">
	      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="#">
	                    <link rel="apple-touch-icon-precomposed" href="#">
	                                   <link rel="shortcut icon" href="img/favicon/favicon.ico">

	</head>
	<body>
		<!-- START SETTINGS BOX -->
			<div class="customPanel customPanelClosed">
				  <div class="customPanelOptions">
					    Site Color<br />
					    <div class="customPanelOptionsPickerButton customPanelOptionsPickerButtonSite"></div>
					    <div style="clear:both;"></div>
				  </div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerBackground"></div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerSite"></div>
				  <div class="customPanelButton"></div>
			</div>
			<!-- END SETTINGS BOX --> 
		<header>
			<div class="navTop">
				<div class="container">
					<div class="row">
						<nav class="span12">
							<ul class="clearfix unstyled pull-right">
								<li>
									<a href="#" title="twitter">Twitter</a>
								</li>
								<li>
									<a href="#" title="Flckr">Flckr</a>
								</li>
								<li>
									<a href="#" title="Facebook">Facebook</a>
								</li>
								<li>
									<a href="#" title="Google+">Google+</a>
								</li>
							</ul>
						</nav><!-- /nav -->
					</div><!-- /.row [TopNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.navTop -->

			<div class="mainNav">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="index-2.html" class="brand">Design Portfolio</a>
						</div>
						<nav class="span8 clearfix navbar-inner">
							<a class="btn btn-color menuMobile" data-toggle="collapse" data-target=".nav-collapse">menu</a>
						    <div class="nav-collapse collapse">
								<ul class="nav inline pull-right menu">
									<li>
										<a href="#">Home</a>
										<ul class="unstyled">
											<li><a href="index-2.html">Home default</a></li>
											<li><a href="home_1.html">Home var1</a></li>
											<li><a href="home_2.html">Home var2</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Pages</a>
										<ul class="unstyled">
											<li><a href="about_us.html">About us</a></li>
											<li><a href="service.html">Services</a></li>
											<li><a href="faq.html">Faq</a></li>
											<li><a href="features.html">Features</a></li>
											<li><a href="error_404.html">error 404</a></li>
											<li><a href="full_width.html">Full width</a></li>
											<li><a href="right_sidebar.html">Right sidebar</a></li>
											<li><a href="left_sidebar.html">Left sidebar</a></li>
										</ul>
									</li>
									<li>
										<a href="#">GALLERY</a>
										<ul class="unstyled">
											<li><a href="gallery_2.html">Gallery 2 columns</a></li>
											<li><a href="gallery_3.html">Gallery 3 columns</a></li>
											<li><a href="gallery_4.html">Gallery 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">PORTFOLIO</a>
										<ul class="unstyled">
											<li><a href="portfolio_2.html">Portfolio 2 columns</a></li>
											<li><a href="portfolio_3.html">Portfolio 3 columns</a></li>
											<li><a href="portfolio_4.html">Portfolio 4 columns</a></li>
										</ul>
									</li>
									<li class="active">
										<a href="#">BLOG</a>
										<ul class="unstyled">
											<li><a href="blog_right_sidebar.html">Right sidebar</a></li>
											<li><a href="blog_left_sidebar.html">Left sidebar</a></li>
											<li><a href="blog.html">Full width</a></li>
											<li><a href="blog_single_post.html">Single post</a></li>
										</ul>
									</li>
									<li><a href="contacts.html">CONTACTS</a></li>
								</ul>
							</div>
						</nav><!-- /nav.span6 [MainNavigation] -->
					</div><!-- /.row [Logo, MainNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.mainNav -->
		</header><!-- /header -->
		
		<div class="container-fluid topImage">
			<div class="container">
				<div class="row">
					<div class="span12">
						<h1>Blog</h1>
					</div>
				</div>
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
						  <li><a href="#">Home</a> <span class="divider">/</span></li>
						  <li class="active">Blog</li>
						</ul>
					</div>
				</div>
			</div><!-- /.container -->
		</div><!-- /.container-fluid [topImage] -->

		<div class="container blog">
			<div class="row">
				<ul class="span8 blogItems">
					<li class="row">
						<div class="span2 postDate">
							<ul class="row-fluid unstyled">
								<li class="date span6"><b>31</b><br>dec</li>
								<li class="comment span6">
									<a href="#"><b class="comment-icon"></b>(21)</a>
								</li>
								<li class="author span12">
									<h3><a href="#">By admin</a></h3>
								</li>
							</ul>
						</div><!-- /.span2 -->
						<div class="span6">
							<figure>
									<a href="img/blog_photo/item4.jpg" data-rel="prettyPhoto"><img src="img/blog_photo/item4.jpg" alt="blogPhoto"></a>
							</figure>
							<ul class="breadcrumb blogBreadcrumb">
								<li><a href="#">By admin</a> <span class="divider">/</span></li>
								<li><a href="#">On dec 31</a> <span class="divider">/</span></li>
							 	<li><a href="#">In wordpress</a> <span class="divider">/</span></li>
								<li class="active">Sport</li>
							</ul>
							<h1>Quisque ullamcorper risus</h1>
							<p>
								Mauris gravida egestas placerat. Pellentesque id eros fermentum purus condimentum imperdiet in id elit. Nulla facilisi. Aenean volutpat sodales hendrerit. Fusce tincidunt aliquet leo id venenatis. Sed sagittis, metus a ultrices euismod, sapien enim hendrerit eros, eget lacinia magna turpis vel diam.
							</p>
							<blockquote>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus, metus vitae hendrerit porttitor, felis nulla aliquet nisi, eget pretium justo velit eu ipsum. Fusce id lorem enim.
								</p>
							</blockquote>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus, metus vitae hendrerit porttitor, felis nulla aliquet nisi, eget pretium justo velit eu ipsum. Fusce id lorem enim. Duis dui dui, vestibulum quis blandit non, tristique sit amet tortor. Nunc sollicitudin molestie enim sed convallis. Sed id lobortis dolor. Sed neque purus, ullamcorper a tempus sit amet, dignissim rutrum ipsum. Pellentesque et elit tincidunt sapien feugiat molestie.
							</p>
							<div class="row-fluid">
								<a href="img/blog_post.jpg" class="span5" data-rel="prettyPhoto">
									<img src="img/blog_post.jpg" alt="image post">
								</a>
								<p class="span7">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus, metus vitae hendrerit porttitor, felis nulla aliquet nisi, eget pretium justo velit eu ipsum. Fusce id lorem enim. Duis dui dui, vestibulum quis blandit non, tristique sit amet tortor. Nunc sollicitudin molestie enim sed convallis. Sed id lobortis dolor. tesque et elit tincidunt sapien feugiat molestie. Nullam fringilla mi a felis tempor.
								</p>
							</div>
							<p>
								Vivamus faucibus, metus vitae hendrerit porttitor, felis nulla aliquet nisi, eget pretium justo velit eu ipsum. Fusce id lorem enim. 
							</p>
						</div><!-- /.span6 -->
						<div class="span8">
							<form action="#" id="contact_page_form" class="contactForm coloredGray">
								<h1>Leave a Reply</h1>
								<p class="row-fluid">
									<label for="nameContact" class="span2">name<sup>*</sup></label>
									<input type="text" name="nameContact" class="span10">
									<b class="colored span10 offset2 contact_page_form_result"></b>
								</p>
								<p class="row-fluid">
									<label for="emailContact" class="span2">Email<sup>*</sup></label>
									<input type="email" name="emailContact" class="span10">
									<b class="colored span10 offset2 contact_page_form_result"></b>
								</p>
								<p class="row-fluid">
									<label for="subjectContact" class="span2">Website</label>
									<input type="text" name="subjectContact" class="span10">
									<b class="colored span10 offset2"></b>
								</p>
								<p class="row-fluid">
									<label for="messContact" class="span2">Comment<sup>*</sup></label>
									<textarea name="messContact" class="span10"></textarea>
									<b class="colored span10 offset2 contact_page_form_result"></b>
								</p>
								<p class="row-fluid">
									<input type="submit" value="Post comment" class="btn btn-color offset2">
								</p>
							</form><!-- /.contactForm -->	
						</div><!-- /.span8 [contactForm]-->

						<div class="span8">
							<h3>4 comments</h3>
							<ul class="row commentsPost">
								<li class="span8">
									<div class="row-fluid">
										<div class="span2">
											<figure>
												<a href="#">
													<img src="img/avatars/user1.jpg" alt="user photo">
												</a>
											</figure>
										</div>
										<div class="span10 coloredGray commentMess">
											<h3>
												<a href="#">John smith</a>
												<b>24 may 2012</b>
											</h3>
											<p>
												Quisque ullamcorper risus sit amet est semper molestie. Vestibulum ante ipsum primis in faucibus.
											</p>
											<a href="#" class="readMore">Reply &#8594;</a>
										</div>
									</div>
									<ul class="row">
										<li class="span7 offset1">
											<div class="row-fluid">
												<div class="span2">
													<figure>
														<a href="#">
															<img src="img/avatars/user2.jpg" alt="user photo">
														</a>
													</figure>
												</div>
												<div class="span10 coloredGray commentMess">
													<h3>
														<a href="#">John smith</a>
														<b>24 may 2012</b>
													</h3>
													<p>
														Quisque ullamcorper risus sit amet est semper molestie. Vestibulum ante ipsum primis in faucibus.
													</p>
													<a href="#" class="readMore">Reply &#8594;</a>
												</div>
											</div>
										</li>
										<li class="span7 offset1">
											<div class="row-fluid">
												<div class="span2">
													<figure>
														<a href="#">
															<img src="img/avatars/user3.jpg" alt="user photo">
														</a>
													</figure>
												</div>
												<div class="span10 coloredGray commentMess">
													<h3>
														<a href="#">John smith</a>
														<b>24 may 2012</b>
													</h3>
													<p>
														Quisque ullamcorper risus sit amet est semper molestie. Vestibulum ante ipsum primis in faucibus.
													</p>
													<a href="#" class="readMore">Reply &#8594;</a>
												</div>
											</div>
										</li>
									</ul>
								</li>
								<li class="span8">
									<div class="row-fluid">
										<div class="span2">
											<figure>
												<a href="#">
													<img src="img/avatars/user1.jpg" alt="user photo">
												</a>
											</figure>
										</div>
										<div class="span10 coloredGray commentMess">
											<h3>
												<a href="#">John smith</a>
												<b>24 may 2012</b>
											</h3>
											<p>
												Quisque ullamcorper risus sit amet est semper molestie. Vestibulum ante ipsum primis in faucibus.
											</p>
											<a href="#" class="readMore">Reply &#8594;</a>
										</div>
									</div>
								</li>
							</ul>
						</div><!-- /.span8 [commentsPost]-->

					</li><!-- /.row -->
				</ul><!-- /.span8 [blogItems]-->

				<div class="span4 sidebar">
					<form action="#">
						<p class="row-fluid">
							<input type="text" class="search span12" required x-webkit-speech="x-webkit-speech">
						</p>
					</form>
					<div class="sidebarMenu boxModel">
						<h1 class="colored">Category</h1>
						<ul>
							<li class="active"><a href="#"><b>&#8594;</b>Category 1</a></li>
							<li><a href="#"><b>&#8594;</b>Category 2</a></li>
							<li><a href="#"><b>&#8594;</b>Category 3</a></li>
							<li><a href="#"><b>&#8594;</b>Category 4</a></li>
							<li><a href="#"><b>&#8594;</b>Category 5</a></li>
						</ul>
					</div><!-- /.sidebarMenu -->
					<div class="boxModel recentPostsSidebar">
						<h1 class="colored">Recent posts</h1>
						<ul class="tabPost unstyled">
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr3.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">Phasellus ut placerat massa. Nunc commodo sagittis rutrum.</a> <br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr4.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a><br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						  	<li>
						  		<figure>
						  			<img src="img/flickr/flickr5.jpg" alt="photo">
						  		</figure>
						  		<p>
						  			<a href="#">
						  						Praesent dui orci, consectetur vel vehicula sed. Aenean lorem neque.
						  					</a><br>
						  			<b>24.09.2012</b>
						  		</p>
						  	</li>
						</ul>
					</div><!-- /.recentPostsSidebar-->
					<div class="sidebarMenu boxModel">
						<h1 class="colored">Archives</h1>
						<ul>
							<li class="active"><a href="#"><b>&#8594;</b>may 2012</a></li>
							<li><a href="#"><b>&#8594;</b>June 2012</a></li>
							<li><a href="#"><b>&#8594;</b>July 2012</a></li>
							<li><a href="#"><b>&#8594;</b>August 2012</a></li>
							<li><a href="#"><b>&#8594;</b>September 5</a></li>
						</ul>
					</div><!-- /.sidebarMenu -->
				</div><!-- /.span4 -->
			</div><!-- /.row -->
		</div><!-- /.container [blog] -->

		<footer class="mainFooter">
			<div class="clients">
				<div class="container">
					<ul class="row inline">
						<li>
							<a href="#">
								<img src="img/partner/partner5.png" alt="themeforest">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner4.png" alt="audiojungle">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner3.png" alt="activeden">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner2.png" alt="graphicriver">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner1.png" alt="codecanyon">
							</a>
						</li>
					</ul><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.clients -->

			<div class="footerWidgets">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="#" class="brand">DesignPortfolio</a>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin massa vel odio gravida placerat. Suspendisse porta, nulla non eleifend vehicula, libero sapien luctus sapien, ut sodales augue velit vitae lacus. 
							</p>
						</div><!-- [footerMessage] -->
						<div class="span4">
							<h2>FLICKR PHOTOSTREAM</h2>
							<ul class="inline flickrImages" data-userid="30233972@N02" data-items="8">
												
							</ul><!-- /.row-fluid [flickrimages] -->
						</div><!-- [flickr] -->
						<div class="span4">
							<h2>RECENT POSTS</h2>
							<ul class="recentPosts">
								<li>
									<p>
										<a href="#">
											Pellentesque rhoncus nibh id nibh mollis Etiam aliquam, eros id facilisis 
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Donec volutpat, nisl quis luctu dap
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Etiam faucibus, ligula nec blandit ornare, massa enim ultricies leo, eget porta dolor elit.
										</a>
									</p>
								</li>
							</ul>
						</div><!-- [recent posts] -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.footerWidgets -->

			<div class="copyRight">
				<div class="container">
					<div class="row">
						<div class="span7">
							<p>
								&copy; Copyright 2013. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
							</p>
						</div>
						<div class="span5 text-right">
							<p>
								Designed by Theme Designer. Developed by 960 Development
							</p>
						</div>
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.copyright -->
		</footer><!-- /.footer [mainFooter] -->
	
	<!-- Scripts -->
	<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/settingsbox.js"></script>
	<script src="js/farbtastic/farbtastic.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/izotope.js"></script>
	<script src="js/option.js"></script>
	</body>
</html>